<template>
	<div class="middle">
		<div class="middlebg"></div>
		<div class="top">
			<span class="teacher">教师管理 <i class="el-icon-arrow-right"></i></span>
			<span class="addteacher" @click = "addTeacher"><i class="el-icon-plus"></i>添加教师</span>
			<span class="back" @click="back">返回</span>
		</div>
		<el-card class="box-card" v-loading="loading" element-loading-background="rgba(255,255,255, 0.5)">
			<div slot="header" class="clearfix card">
				<!--搜索区域-->
				<div>
					姓名<el-input class="ipt" clearable v-model="name" placeholder="请输入姓名"></el-input>
					电话<el-input class="ipt" clearable v-model="phone" placeholder="请输入电话"></el-input>
					班级<template>
						  <el-select class="class" clearable v-model="selectId" placeholder="请选择班级">
							  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
						  </el-select>
						</template>
					<el-button type="danger" class="btn" @click="search">搜索</el-button>
					<form class="form">
					  <input type="file" name="fileup" id="uploadEventFile" v-on:change="fileChange($event)" style="display:none" />
					</form>
				</div>
				<!--表格区域-->
				<el-table ref="singleTable" :data="teacherList" highlight-current-row style="width: 100%">
					<el-table-column class="title" property="name" label="姓名" width="90" align="center"></el-table-column>
					<el-table-column property="phone" label="电话" width="120" align="center"></el-table-column>
					<el-table-column property="email" label="邮箱" width="180" align="center"></el-table-column>
					<el-table-column property="get_name" label="管理班级" width="320" align="center"> </el-table-column>
					<el-table-column label="操作" align="center">
						<template slot-scope="scope">
							<el-button @click="edit(scope.row.id)" type="primary" plain size="mini">编辑</el-button>
							<el-button @click="del(scope.row.id)" type="success" plain size="mini">删除</el-button>
							<el-button @click="configureClass(scope.row.id)" type="danger"  plain size="mini">配置班级</el-button>
							<el-button @click="message(scope.row.id)" type="info"  plain size="mini">账号设置</el-button>
						</template>
					</el-table-column>
        </el-table>
				<!--分页功能-->
				<el-pagination class="fenye"
         @size-change="SizeChange"
         @current-change="currentChange"
         :current-page="page"
         :page-sizes="pagesizes"
         :page-size="rows"
         layout="total, sizes, prev, pager, next, jumper"
         :total="total"
         v-if ="teacherList.length == 0? false :true">
				</el-pagination>
			</div>
			<!--编辑面板 -->
			<el-dialog title="教师编辑" :visible.sync="showAdd" class="add">
				<el-form class="add" ref="editTeacher" :rules = "rules" :model="editTeacher" :inline="true" label-position="right" v-if="active == 0">
					<el-form-item label="用户名">
						<el-input class="input" v-model="editTeacher.name" autocomplete="off"></el-input>
					</el-form-item>
					<template>
						入职时间
						<el-date-picker class="goTime" v-model="editTeacher.entry" type="date" placeholder="选择日期"></el-date-picker>
					</template>
					<template>
						<div class="sex">
							性别
							<el-radio class="boy" v-model="editTeacher.sex" :label="1">男</el-radio>
							<el-radio v-model="editTeacher.sex" :label="0">女</el-radio>
						</div>
					</template>
					<template >
						出生日期
						<el-date-picker class="birthday" v-model="editTeacher.birthday" type="date" placeholder="选择日期"></el-date-picker>
					</template>
					<el-form-item label="职工号" class="kong">
						<el-input class="input telinput" v-model="editTeacher.tid" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="职称" class="kong">
						<el-input class="emailinput" v-model="editTeacher.positional_title" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="手机号" class="kong" prop ="teacher_phone">
						<el-input type="number" disabled class="input telinput" v-model="editTeacher.phone" autocomplete="off"></el-input>
						<span>*登录初始化密码为手机号</span>
					</el-form-item>
					<el-form-item label="邮箱" class="kong" prop ="email">
						<el-input class="emailinput" v-model="editTeacher.email" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="邮箱" class="kong" style="display: none;">
						<el-input class="emailinput" v-model="editTeacher.oldEmail" autocomplete="off"></el-input>
					</el-form-item>
					<template>
						<div class="textarea">
							备注
							<el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="addteacher.content"></el-input>
						</div>
					</template>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="cancleAdd">取 消</el-button>
          <el-button type="primary" @click="postEdit">确 定</el-button>
				</div>
			</el-dialog>
			<!--配置班级-->
			<el-dialog title="配置班级" :visible.sync="classMessage" class="editClass">
				<el-form class="EditClass">
          <el-form-item label="教师姓名" class="teacher">
          <span class="teacherName">{{teacher_name}}</span>
          </el-form-item>
          <el-form-item label="当前班级" class="nowclass">
            <el-tag class="nowClass" v-for="tag in tags" :key="tag.name" closable type="success" @close="handleClose(tag)">
              {{tag.get_grade.grade_title+tag.class_name}}
            </el-tag>
          </el-form-item>
          <div>
            <div class="configureClass">配置班级 <span class="Administration" @click="classAdd">管理班级>></span></div>
          </div>
          <el-form-item>
						<div class="Grade">
							<div v-for="item in gradeClassInfo" class="grade">
								<div class="grades">{{item.grade_title}}</div>
								<div class="qb">全部</div>
								<div v-for="it in item.get_class_info" class="grade_class" >
									<div style="float: left;" @click="addClass(it.id)" :id="it.id">
										{{it.class_name}}
									</div>
								</div>
						  </div>
						</div>
          </el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer footer">
				    <el-button type="primary" class="btn" @click = "distributionClassInfo"><i class="el-icon-check"></i>保存</el-button>
				</div>
			</el-dialog>
			<!--账号设置-->
			<el-dialog title="账号设置" :visible.sync="showMessage" class="mEdit">
				<el-form :model = "messageForm" label-position="right" :rules="rules" status-icon ref="messageForm">
					<el-form-item label="账号" >
						<el-input class="mInput num" disabled v-model="messageForm.phone" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="设置密码" prop="passwordModel" >
						<el-input type="password" class="mInput" v-model.trim="messageForm.passwordModel" autocomplete="off" placeholder="请输入6~15位密码"></el-input>
					</el-form-item>
					<el-form-item label="确认密码" prop ="passwordcheckModel" >
						<el-input type="password" class="mInput" v-model.trim="messageForm.passwordcheckModel" autocomplete="off" placeholder="请再次输入密码"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="cancle">取 消</el-button>
					<el-button @click = "pwdUpdate" type="primary">确 定</el-button>
				</div>
			</el-dialog>
			<!--添加教师模块-->
			<el-dialog title="添加教师" :visible.sync="addTeacherInfo">
				<el-steps :active="active" finish-status="success">
					<el-step title="基本信息"></el-step>
					<el-step title="配置班级"></el-step>
				</el-steps>
				<el-form  class="add" ref="ruleForm" :rules = "rules" :model="addteacher" :inline="true" label-position="right" v-if="active == 0">
					<el-form-item label="用户名">
						<el-input class="input" v-model="addteacher.teacher_name" autocomplete="off"></el-input>
					</el-form-item>
					<template>
						入职时间
						<el-date-picker class="goTime" v-model="addteacher.entry" type="date" placeholder="选择日期"></el-date-picker>
					</template>
					<template>
						<div class="sex">
							性别
							<el-radio class="boy" v-model="addteacher.sex" label="1">男</el-radio>
							<el-radio v-model="addteacher.sex" label="2">女</el-radio>
						</div>
					</template>
					<template >
						出生日期
						<el-date-picker class="birthday" v-model="addteacher.birthday" type="date" placeholder="选择日期">
						</el-date-picker>
					</template>
					<el-form-item label="职工号" class="kong">
						<el-input class="input telinput" v-model="addteacher.tid" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="职称" class="kong">
						<el-input class="emailinput" v-model="addteacher.positional_title" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="手机号" class="kong" prop ="teacher_phone">
						<el-input type="number" class="input telinput" v-model="addteacher.teacher_phone" autocomplete="off"></el-input>
						<span>*登录初始化密码为手机号</span>
					</el-form-item>
					<el-form-item label="邮箱" class="kong" prop ="email">
						<el-input class="emailinput" v-model="addteacher.email" autocomplete="off"></el-input>
					</el-form-item>
					<template>
						<div class="textarea">
							备注
							<el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="addteacher.content">
							</el-input>
						</div>
					</template>
				</el-form>
				<!-- 配置班级 -->
				<el-form class="editClass" v-if="active == 1">
					<div>
						<div class="configureClass">配置班级 <span class="Administration">管理班级>></span></div>
					</div>
					<el-form-item>
						<div class="Grade">
							<div v-for="item in gradeClassInfo" class="grade">
								<div class="grades">{{item.grade_title}}</div>
								<div class="qb">全部</div>
								<div v-for="it in item.get_class_info" class="grade_class">
									<div style="float: left;" @click="addClass(it.id)" :id="it.id">{{it.class_name}}</div>
								</div>
							</div>
						</div>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click = "prev" v-if="active == 1 || active == 2 ">上一步</el-button>
					<el-button @click = "next" v-if="active == 0">下一步</el-button>
					<el-button type="primary" @click="postTeacher" v-if="active == 1">确 定</el-button>
				</div>
			</el-dialog>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			var checkPhone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('手机号不能为空'));
        } else {
          const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
          if (reg.test(value)) {
            callback();
          } else {
            return callback(new Error('请输入正确的手机号'));
          }
        }
			};
			var checkEmail =(rule,value,callback)=>{
        if (value != '') {
          var reg=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
          if(!reg.test(value)){
            callback(new Error('请输入有效的邮箱'));
          }
        }
        callback();
			}
      var validatePass = (rule, value, callback) => {
        if (value == '') {
            callback(new Error('请再次输入密码'));
          } else if (value != this.messageForm.passwordModel) {
            callback(new Error('两次输入密码不一致!'));
          } else {
            callback();
        }
      };
      return {
        loading:true,
        name: '',
        phone:'',
        teacherList:[],//存放教师信息
        rows:6,//每页几条
        page:1,//当前显示页数
        pagesizes:[6,10,15,20],//更改每页显示条数
        total:20,//一共多少条,
        editTeacher:{
          id:'',
          birthday:'',
          entry:'',//入职时间
          sex:1,
          phone:'',
          name:'',
          email:'',
          oldEmail:'',
          positional_title:'',
          tid:'',
          content:'',//备注
        },
        options:[],
        selectId:'',
        value: '',
        currentRow: null,
        showAdd:false,
        messageForm:{
          phone:'',
          passwordModel:'',
          passwordcheckModel:'',
        },
        //修改密码
        teacherid:'',
        showMessage:false,
        //配置班级
        classMessage:false,
        tags: [],
        teacher_id:'',
        teacher_name:'',
        gradeClassInfo:[],
        classInfo:[],
        class_id:'',
        someClass:[],
        //添加教师
        addTeacherInfo:false,
        active: 0,
        addteacher:{
          teacher_name:'',
          entry:'',//入职时间
          sex:'',
          birthday:'',
          teacher_phone:'',
          tid:'',
          positional_title:'',
          email:'',
          content:'',//备注
          classInfo:[],
        },
        rule:'',//登录者身份
        rules: {
          teacher_phone: [
            {validator: checkPhone, trigger: 'blur'}
          ],
          email: [
            {validator: checkEmail, trigger: 'blur'}
          ],
          passwordcheckModel:[
            {validator: validatePass, trigger: 'blur' }
          ]
        },
				//上传
				headerOBj:{
					token:window.sessionStorage.getItem('token')
				},
			}
		},
		methods:{
			//获取教师端信息
			getTeacher(){
				this.$http.post('/api/teacher/teacherAll',{
					name:this.name,
					phone:this.phone,
					rows:this.rows,
					page:this.page,
					class_id:this.selectId
				}).then(res=>{
					this.loading = false
					this.teacherList = res.data.data
					this.total = res.data.num
					//保存教师数量
					localStorage.setItem('teacherNum',res.data.num)
					//获取管理班级的数据
					res.data.data.map(item=>{
						item.classname=[];
						item.get_class.map(data=>{
							data.name = data.get_grade.grade_title+data.class_name
							item.classname.push(data.name)
						})
						item.get_name=item.classname.join(',')
					})

				})
			},
			//每页显示条数
			SizeChange(val){
				this.rows = val
				this.getTeacher()
			},
			//切换第几页
			currentChange(val){
        this.page = val
        this.getTeacher()
      },
      getSchoolClassInfo(){
        this.$http.post('/api/grade_class/getSchoolClassInfo')
          .then(res=>{
            res.data.data.map(item=>{
              item.gradeClass = item.get_grade.grade_title+item.class_name
              var obj ={}
              obj.label = item.gradeClass
              obj.value = item.id
              this.options.push(obj)
          })
        })
      },
      //搜索教师
      search(){
        this.getTeacher()
      },
      //添加教师
      addTeacher(){
        this.getGradeClassInfo()
        this.addTeacherInfo = true
        this.active = 0
      },
      //步骤条
      prev(){
        --this.active;
        if(this.active <2) this.active =0

      },
      next() {
        //用户名不能为空
        if(!this.addteacher.teacher_name) {
          this.$message({
            message:'用户名不能为空',
            type:'error'
          })
          this.active =0
          return
        }
        //手机号判断
        if(!this.addteacher.teacher_phone) {
          this.$message({
            message:'手机号不能为空',
            type:'error'
          })
          this.active =0
          return
        }else if(this.addteacher.teacher_phone.length != 11) {
          this.$message({
            message:'手机号格式不正确',
            type:'error'
          })
          this.active =0
          return
        }
          if (this.active++ > 0) this.active = 0;
          this.getGradeClassInfo()
      },
      //清空数据
      clearform(){
        for(var item in this.addteacher){
          this.addteacher[item]=''
        }
      },
		    //提交添加信息
			postTeacher(){
				if (this.active++ >1) this.active = 0;
				this.$http.post('/api/teacher/teacherAdd',this.addteacher)
		    	.then(res=>{
            if(res.data.code){
		    		 	this.$message({
                message:res.data.msg,
                type:'success'
              })
              this.addTeacherInfo = false
              this.getTeacher()
              //清空教师添加列表
              this.addteacher.teacher_name = ''
              this.addteacher.entry = ''
              this.addteacher.sex = ''
              this.addteacher.birthday = ''
              this.addteacher.teacher_phone = ''
              this.addteacher.tid = ''
              this.addteacher.positional_title = ''
              this.addteacher.email = ''
              this.addteacher.content = ''
              this.addteacher.classInfo = []
            }else if(res.data.errorCode){
		    		 	this.$message({
							  message:res.data.msg,
                type:'error'
						  })
            }
		    	})
		    	this.getTeacher()
			},
			//编辑
			edit(id){
				this.showAdd=true
				this.$http.post('/api/teacher/teacherInfo',{
					id:id
				}).then(res=>{
					this.editTeacher = res.data.data
					this.editTeacher.oldEmail = res.data.data.email
				})
			},
			//编辑提交
			postEdit(){
				this.$http.post('/api/teacher/teacherInfoUpdate',this.editTeacher)
					.then(res=>{
						if(res.data.code === 200) {
							this.$message({
								message:res.data.msg,
								type:'success'
							})
							this.showAdd=false
						}else if(res.data.errorCode == 400) {
							this.$message({
								message:res.data.msg,
								type:'error'
							})
						}
						this.getTeacher()

					})
			},
			//删除
			del(id){
				this.$confirm('是否永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.post('/api/teacher/teacherDel', {
            id:id
          }).then(res=>{
            this.getTeacher()
            if(res.data.code == 200){
              this.$message({
                type: 'success',
                message: res.data.msg
              });
            }else if(res.data.errorCode){
              this.$message({
                type: 'error',
                message: res.data.msg
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
			},
			//编辑用户取消
			cancleAdd(){
				this.showAdd=false
			},
			//配置班级
			configureClass(id){
				this.classMessage = true
				this.teacher_id = id
				this.getTeacherDistributionClass()
				this.getGradeClassInfo()
			},
			//配置班级提交
			distributionClassInfo(){
				this.$http.post('/api/grade/distributionClassInfo',{
					classInfo : this.someClass,
					teacher_id : this.teacher_id
				}).then(res=>{
					if(res.data.errorCode == 400){
						this.$message({
							type:'error',
							message:res.data.msg
						})
					}else {
						this.$message({
							type:'success',
							message:res.data.msg
						})
						var arr = this.someClass;
						for(var i = 0 ; i<arr.length;i++){
							$('#'+arr[i]).css({"background": "#ccc"})
						}
						this.someClass = []
						this.classMessage = false
						this.getTeacher()
					}
				})
			},
			//删除当前管理班级
			handleClose(tag) {
				this.class_id = tag.id
          this.$http.post('/api/grade/delTeacherDistributionClassInfo',{
          teacher_id : this.teacher_id,
          class_id:this.class_id
        }).then(res=>{
          this.getTeacherDistributionClass()
        })
		    },
			//获取当前班级
			getTeacherDistributionClass() {
				this.$http.post('/api/grade/teacherDistributionClass',{
					teacher_id:this.teacher_id
				}).then(res=>{
					this.tags = res.data.data
					this.teacher_name = res.data.teacher_name
				})
			},
			//获取年级以及班级信息
			getGradeClassInfo(){
				this.$http.post('/api/grade/getGradeClassInfo')
					.then(res=>{
						this.gradeClassInfo = res.data.data
					})
			},
			addClass(id){
				if($.inArray(id,this.someClass) > -1){
					$('#'+id).css({"background": "#ccc"})
					var keys = this.someClass.indexOf(id)
					delete this.someClass.splice(keys,1)
					delete this.addteacher.classInfo.splice(keys,1)
				}else{
					$('#'+id).css({"background": "#00B02D"})
					this.someClass.push(id);
					this.addteacher.classInfo.push(id)
				}
			},
			//账号设置
			message(id){
				this.showMessage = true
				this.$http.post('/api/teacher/teacherInfo',{
					id:id,
				}).then(res=>{
					this.messageForm = res.data.data
					this.teacherid = this.messageForm.id
				})
			},
			//提交账户设置
			pwdUpdate(){
				this.$http.post('/api/teacher/pwdUpdate',{
					id:this.teacherid,
					pwd:this.messageForm.passwordModel
				}).then(res=>{
					if(this.messageForm.passwordModel != this.messageForm.passwordcheckModel) {
						this.$message({
							type:'error',
							message:'两次输入密码不一致'
						})
						this.showMessage = true
					}else {
						this.$message({
							type:'success',
							message:res.data.msg
						})
						this.messageForm.passwordModel=''
						this.messageForm.passwordcheckModel=''
						this.showMessage = false
					}
				})
			},
			//编辑账号取消
			cancle(){
				this.showMessage=false
			},
			//返回上一页
			back(){
				this.$router.push({name:'teaching'})
			},
			importData(event) {
        event.preventDefault();
        $("#uploadEventFile").trigger("click")
      },
      fileChange: function (el) {
        el.preventDefault();//取消默认行为
        let vm = this
        let uploadEventFile = $("#uploadEventFile").val()
        this.file = el.target.files[0]
        if (uploadEventFile == '') {
         alert("请择excel,再上传");
        } else if (uploadEventFile.lastIndexOf(".xls") > 0 || uploadEventFile.lastIndexOf(".XLS") > 0 || uploadEventFile.lastIndexOf(".xlsx") > 0) {
          let formData = new FormData();
          // 向 formData 对象中添加文件
          formData.append('excel',this.file);
          let config = {
          // 一定要定义头
          headers: {
            'token': window.sessionStorage.getItem('token')
          }
        }
        // url为对应的后端接口
        this.$http.post('/api/teacher/importTeacherInfo',formData,config).then(function (res) {
        })
        this.getTeacher()
        } else {
          alert("只能上传excel文件");
        }
      },
      //配置班级
      classAdd(){
        this.$router.push({name:'classes'})
      }
		},
		created(){
			//获取身份
      this.rule = localStorage.getItem('rule')
			this.getTeacher()
			//获取搜索区域班级
			this.getSchoolClassInfo()
		}
	}
</script>

<style>
	.el-main {
		padding: 0;
	}
	.middle {
	    height: 100%;
	    width: 100%;
	    background-repeat:repeat;
	    background-size: contain;
	    background-position: center;
	    background-attachment: fixed;
	    z-index: -1;
	}
	.el-dialog {
	    width: 650px;
	}
	.el-dialog__body {
		padding: 0px 20px;
	}
</style>
<style lang="less" scoped>
	.middlebg {
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		background: url(../../assets/image/bg-img.png) no-repeat center;
		background-size: 100%;
	}
	.top {
		height: 50px;
		line-height: 50px;
		background-color: #dbdbdb;
		position: relative;
		.teacher {
			display: inline-block;
			background: #00b02d;
			padding:0 15px;
			color: #fff;
		}
		.addteacher {
			display: inline-block;
			background: #3A8EE6;
			height: 24px;
			line-height: 24px;
			position: absolute;
			right: 180px;
			top: 10px;
			padding: 3px 15px;
			font-size: 14px;
			border-radius: 5px;
			color: #fff;
			cursor: pointer;
		}
		.back {
			position: absolute;
			right: 0;
			background: #9cbf83;
			padding: 0 15px;
			border-radius: 3px;
			color: #fff;
			cursor: pointer;
		}
	}
	.box-card {
		margin: 30px 50px;
		.card {
			padding: 20px;
		}
		.ipt {
			width: 15%;
			margin: 0 5px;
		}
		.class {
			margin: 0 5px;
      width: 180px;
		}
		.btn {
			width: 70px;
			height: 40px;
			margin: 0 30px;
		}
		.down {
			color: #3A8EE6;
			text-decoration: underline;
			margin-left: 20px;
		}
		.form {
			display: inline-block;
			border:0
		}
		.fenye {
			margin-top: 20px;
			text-align: center;
		}
		.add {
			.input {
				width: 200px;
				margin-right:50px;
			}
			.sex {
				display: inline-block;
				width: 305px;
				padding-left: 10px;
				.boy {
					padding-left: 14px;
				}
			}
			.goTime,.birthday  {
				margin-left: 10px;
				width: 200px;
			}
			.kong {
				margin-top: 15px;
				position: relative;
				margin-right: 0;
				span {
					position: absolute;
					color: red;
					font-size: 10px;
					top: 32px;
				}
			}
			.telinput {
				margin-right: 91px;
			}
			.textarea {
				margin:0 18px;
			}

		}
		.editClass {
			margin-bottom: 0;
			.teacher {
				margin-bottom:0;
				.teacherName {
					color: #00B02D;
				}
			}

			.configureClass {
				text-align: center;
			}
			.nowclass {
				margin-bottom:0;
				.nowClass {
					margin: 0 5px;
				}
			}

			.configureClass {
				text-align: center;
				height: 40px;
				.Administration {
					float: right;
					margin-right: 30px;
					color: #00B02D;
          cursor: pointer;
				}
			}
			.Grade {
				width: 100%;
				.grade {
					height: 65px;
					width: 100%;
					margin: 5px;
					padding: 5px;
					.grades {
						width: 60px;
						float: left;
						color: #00B02D;
						height: 30px;
						line-height: 30px;
					}
					.qb {
						width: 60px;
						float: left;
						height: 30px;
						line-height: 30px;
						background-color: #ccc;
						text-align: center;
						margin-right: 30px;
					}
					.grade_class {
						float: left;
						height: 30px;
						line-height: 30px;
						margin-bottom: 10px;
						div {
							display: inline-block;
							width: 60px;
							height: 30px;
							text-align: center;
							background-color: #ccc;
							margin-right: 10px;
							cursor: pointer;
						}
						.grey {
							background: #ccc;
						}
						.green {
							background: #00B02D;
							color: #fff;
						}
					}

				}

			}
			.footer {
				text-align: center;
				padding-top: 0;
				.btn {
					width:100px;
					i {
						font-size: 16px;
						padding-right:10px;
					}
				}
			}
		}
		.mEdit {
			.mInput {
				width: 300px;
			}
			.num {
				margin-left: 30px;
			}
		}

	}
</style>
